<!doctype html>
<html>

	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="{MUI_CSS_LOC}" rel="stylesheet" />
	</head>

	<body>
		<script src="{MUI_JS_LOC}"></script>
		<script type="text/javascript">
			mui.init()

			function decode(data) {
				var movies = eval('(' + data + ')');

				var ulE = document.getElementById("mvlistxx");
				
				ulE.innerHTML=""
				for(var i = 0; i < movies.length; i++) {
					var movies = eval('(' + data + ')');

					var ulE = document.getElementById("mvlistxx");
					for(var i = 0; i < movies.length; i++) {
						var liE = document.createElement("li");
						liE.className = "mui-table-view-cell mui-media";
						liE.setAttribute("mid",movies[i].mid)

						var aE = document.createElement("a");
						aE.href = "moviedtl.html"//?mid=" + movies[i].mid;
						aE.className = "mui-navigate-right";

						var imgE = document.createElement("img");
						imgE.className = "mui-media-object mui-pull-left";

						var divE = document.createElement("div");
						divE.className = "mui-media-body";
						divE.innerHTML =movies[i].typid + " : " + movies[i].name;

						
						aE.appendChild(imgE);
						aE.appendChild(divE);
						liE.appendChild(aE);
						ulE.appendChild(liE);
					}
				}
				mui('#mvlistxx').on("tap","li",function(){
					var mid=this.getAttribute("mid");
					mui.openWindow("moviedtl.html?mid="+mid)
				})
			}
		</script>
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-scalable">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-left">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" id="leftSelect">
						<div class="mui-card" id="activity1" link="">
							<div class="mui-card-header">活动</div>
						</div>
						<div class="mui-card" id="activity2" link="">
							<div class="mui-card-header">推荐</div>
						</div>
						<div class="mui-card" id="activity3" link="">
							<div class="mui-card-header">收藏</div>
						</div>
						<div class="mui-card" id="activity4" link="">
							<div class="mui-card-header">设置</div>
						</div>

					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
					<h1 class="mui-title">欢迎来到贪玩蓝月</h1>
				</header>
				<div class="mui-content mui-scroll-wrapper ">
					<div class="mui-scroll" id="content">
						<!-- 主界面具体展示内容 -->

						<div id="page1">
							<div class="mui-card" id="movie" link="movie.html">
								<!--页眉，放置标题-->
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(img/test.jpeg)">看电影</div>
							</div>
							<div class="mui-card" id="food" link="food.html">
								<!--页眉，放置标题-->
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(img/test.jpeg)">美食</div>
							</div>
							<div class="mui-card" id="display" link="display.html">
								<!--页眉，放置标题-->
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(img/test.jpeg)">展览</div>
							</div>
							<div class="mui-card" id="show" link="show.html">
								<!--页眉，放置标题-->
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(img/test.jpeg)">演出</div>
							</div>
							<div class="mui-card" id="show" link="show.html">
								<!--页眉，放置标题-->
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(img/test.jpeg)">测试</div>
							</div>
						</div>

						<div id="page2">
							<div>
								<label>手机号</label>
								<input class="mui-input-text" id="phoneNumber" />
								<br />
								<textarea rows="20" id="message_tosend"></textarea>

								<div align="center">
									<button type="button" class="mui-btn mui-btn-primary mui-btn-blue" data-loading-text="请稍等" onclick="sendMessage()">确定</button>
								</div>

							</div>

						</div>
						<div id="page3">

							<ul id="mvlistxx" class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell mui-hidden">cared
									<div id="M_Toggle" class="mui-switch mui-active">
										<div class="mui-switch-handle"></div>
									</div>
								</li>
								

							</ul>
							<script>
								
							</script>

						</div>
						<div id="page4">

							<form>
								<ul id="settingID" class="mui-table-view">
									<li class="mui-table-view-cell mui-media" link="mysetting/about.html">
										<div class="mui-media-body">
											关于
										</div>
									</li>
									<li class="mui-table-view-cell mui-media" link="mysetting/help.html">
										<div class="mui-media-body">
											帮助
										</div>
									</li>
									<li class="mui-table-view-cell mui-media" link="mysetting/feedback.html">
										<div class="mui-media-body">
											反馈
										</div>
									</li>
									<li class="mui-table-view-cell mui-media" link="">
										<div class="mui-media-body">
											退出
										</div>
									</li>
								</ul>
							</form>

						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			document.getElementById('page1').style.display = ''
			document.getElementById('page2').style.display = 'none'
			document.getElementById('page3').style.display = 'none'
			document.getElementById('page4').style.display = 'none'
			/**
			 * ＃content开启滚动
			 */
			mui('.mui-content').scroll();
			/**
			 * 活动页面触发
			 */
			mui("#content").on('tap', '.mui-card', function() {
				var id = this.getAttribute("id")
				var link = this.getAttribute("link")
				mui.openWindow(link)
			})
			/**
			 * 左侧导航触发
			 */
			mui("#leftSelect").on('tap', '.mui-card', function() {
				var id = this.getAttribute("id")
				//TODO 可以使用状态模式
				switch(id) {
					case "activity1":
						document.getElementById('page1').style.display = ''
						document.getElementById('page2').style.display = 'none'
						document.getElementById('page3').style.display = 'none'
						document.getElementById('page4').style.display = 'none'
						break;
					case "activity2":
						document.getElementById("page2").style.display = ''
						document.getElementById('page1').style.display = 'none'
						document.getElementById('page3').style.display = 'none'
						document.getElementById('page4').style.display = 'none'
						break;
					case "activity3":
						document.getElementById("page3").style.display = ''
						document.getElementById('page1').style.display = 'none'
						document.getElementById('page2').style.display = 'none'
						document.getElementById('page4').style.display = 'none'
						mui.plusReady(function() {
									var json = localStorage.getItem("save")
									console.log(json)
									decode(json)
								})
						break;
					case "activity4":
						document.getElementById("page4").style.display = ''
						document.getElementById('page1').style.display = 'none'
						document.getElementById('page2').style.display = 'none'
						document.getElementById('page3').style.display = 'none'
						break;
				}
				mui('.mui-off-canvas-wrap').offCanvas().close()
			})
			/**
			 * 发送信息
			 */
			function sendMessage() {
				var phoneNumber = document.getElementById('phoneNumber').value
				var message = document.getElementById('message_tosend').value

				var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS)
				msg.to = [String(phoneNumber)]
				msg.body = message
				plus.messaging.sendMessage(msg)

			}
			mui('#settingID').on('tap', 'li', function() {
				var link = this.getAttribute("link")
				mui.openWindow(link)

			})
		</script>
	</body>

</html>